.wizard-steps {
    @apply flex justify-between;

    .step {
        @apply text-center relative text-xs flex-1 mx-auto;
    }

    .step:not(:first-child):before {
        @apply absolute h-1 w-1/2 bg-gray-300;
        content: '';
        left: 0 ; [dir="rtl"] & { left: auto ; right: 0 ; }
        top: 18px;
    }

    .step:not(:last-child):after {
        @apply absolute h-1 w-1/2 bg-gray-300;
        content: '';
        left: 50% ; [dir="rtl"] & { left: auto ; right: 50% ; }
        top: 18px;
    }

    .step.complete:before,
    .step.complete:after {
        @apply bg-blue !important;
    }

    .ball {
        @apply h-10 w-10 bg-gray-300 dark:bg-dark-800 text-gray dark:text-dark-150 text-base rounded-full text-center z-10 mx-auto relative;
        line-height: 40px;
    }

    .label {
        @apply text-xs mt-1 text-gray dark:text-dark-175;
    }

    .complete {
        .ball {
            @apply bg-blue text-white;
        }
        .label {
            @apply text-blue;
        }
    }
}

.dark {
    .wizard-steps {
        .step:not(:first-child):before,
        .step:not(:first-child):after {
            @apply bg-dark-800;
        }
    }
}
